<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>响应式</title>
    <!-- <script src="./vue.global.js"></script> -->
    <!--引入vue2开发版本的vue核心包-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
</head>

<!--
冒泡事件就是点击了儿子盒子后父亲盒子的事件也会被触发
可以使用 事件名.stop 修饰符防止冒泡

默认行为就是例如 点击a标签就会跳转
可以使用 事件名.prevent 阻止默认行为

-->
<style>
    #app #father {
        background-color: aqua;
        width: 400px;
        height: 400px;
    }

    #app #son {
        background-color: bisque;
        width: 200px;
        height: 200px;
    }
</style>

<body>
    <div id="app">
        <div id="father" v-on:click="fatherClick">
            父亲盒子
            <div id="son" v-on:click.stop="sonClick">
                儿子盒子
            </div>
        </div>
        <hr>
        <h3>@事件名.prevent->阻止默认行为</h3>
        <a @click.prevent href="http://www.baidu.com">阻止默认行为</a>
    </div>

    <script>
        const app = new Vue({
            el: '#app',
            methods: {
                fatherClick() {
                    alert("父亲盒子被点击了")
                },
                sonClick(e) {
                    // 可以使用 e.stopPropagation() 方法防止冒泡事件 ,也可以使用 事件.stop 修饰符防止冒泡事件
                    // e.stopPropagation()
                    console.log(e)
                    alert("儿子盒子被点击了")
                }
            }
        })
    </script>

</body>

</html>